<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>根组件</h1>
			<custom1>
				<i>我是父组件定制的</i>
				<template slot="list">
					<p>{{message}}</p>
					<p>{{message}}</p>
					<p>{{message}}</p>
					<p>{{message}}</p>
					<p>{{message}}</p>
				</template>
				<i>我是第二个</i>
			</custom1>
		</div>
		<script type="text/x-template" id="custom1">
			<div>
				<h2>
					<slot>
						<span>我是子组件的标题</span>
					</slot>
				</h2>
				<div>
					<slot name="list">
						<ul>
							<li>123</li>
							<li>123</li>
							<li>123</li>
						</ul>
					</slot>
				</div>	
			</div>
		</script>

		<script>

			// 模板的作用域到底是父组件还是子组件？？？
			// 是父组件的
			/*
				定制结构：
					父组件向定制一个结构，
					定制的内容写在自定义组件之间

				在子组件中用插槽
					一个slot标签
					在一对slot标签中定义的内容是备用内容，默认内容
					也就说，父组件没有定制内容，就显示备用内容

				多个插槽、具名插槽
					给插槽起名字：<slot name="名字"></slot>
								  <slot></slot>  默认插槽
				指定插槽替换内容
					<p slot="名字"></p>
					<i></i>
					<i></i>

			*/

			Vue.component('custom1',{
				data(){
					return {
						message: 'hello,child'
					}
				},
				template: '#custom1'
			});


			

			// 未挂载
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello,parent'
				}
			});

		</script>
	</body>
</html>